<template>
  <el-container>
    <el-header>{{ launcher_name }}</el-header>
    <el-container>
      <el-aside width="50%" style="border-right: 2px solid #DCDFE6;">
        <el-form ref="form" :model="form" label-width="150px">
          <div class="launcherBase" style="margin-right: 10px">
            <el-form-item label="屏幕分辨率(宽*高):">
              <el-row :gutter="0" type="flex">
                <el-col :span="6">
                  <el-input placeholder="宽度" v-model="form.screen.width" type="number" style="width: 140px;" disabled></el-input>
                </el-col>
                <el-col class="line" :span="2" style="text-align: center"><span style="width: 20px">X</span></el-col>
                <el-col :span="10">
                  <el-input placeholder="高度" v-model="form.screen.height" type="number"
                            style="width: 140px;" disabled></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-divider></el-divider>
            <div class="flex">
              <el-form-item label="首屏背景图:">
                <div class="flex">
                  <el-upload
                    class="avatar-uploader"
                    action
                    :auto-upload="false"
                    :show-file-list="false"
                    :on-change="(res,file,type) => {screenBackgroundUpload(res,file,'first')}"
                  >
                    <img v-if="form.screen.firstScreenImg" :src="form.screen.firstScreenImg" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <div>
                    <i v-if="form.screen.firstScreenImg" class="el-icon-delete" @click="form.screen.firstScreenImg=''"></i>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="二屏背景图:">
                <div class="flex">
                  <el-upload
                    class="avatar-uploader"
                    action
                    :auto-upload="false"
                    :show-file-list="false"
                    :on-change="(res,file, type) => {screenBackgroundUpload(res, file, 'second')}">
                    <img v-if="form.screen.secondScreenImg" :src="form.screen.secondScreenImg" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <div>
                    <i v-if="form.screen.secondScreenImg" class="el-icon-delete" @click="form.screen.secondScreenImg=''"></i>
                  </div>
                </div>
              </el-form-item>
            </div>
            <div style="line-height: 10px; text-align: center">
              <span style="font-size: 10px;">只能上传jpg/png文件，且不超过3MB</span></div>
          </div>
          <el-divider style="margin-top: 0px;"></el-divider>
          <div class="organBase" style=" margin-right: 10px">
            <h4 style="margin-left: 10px">机构名称(launcher账号中心)</h4>
            <el-row :gutter="0" type="flex">
              <el-col :span="8">
                <el-form-item label="默认名称:">
                  <el-input placeholder="请输入名称" v-model="form.organ.name" style="width: 100px"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="默认图标:">
                  <div class="flex">
                    <el-upload
                      class="avatar-uploader"
                      action
                      :auto-upload="false"
                      :show-file-list="false"
                      :on-change="(res,file,type) => {screenBackgroundUpload(res, file, 'organImg')}"
                    >
                      <img v-if="form.organ.img" :src="form.organ.img" class="avatar" style="height: 50px;width: 50px;display: block;border-style: none">
                      <i v-else class="el-icon-plus organ_img_uploader"></i>
                    </el-upload>
                    <div><i v-if="form.organ.img" class="el-icon-delete" @click="form.organ.img=''"></i></div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="字体:">
                  <el-select v-model="form.organ.font" placeholder="请选择" style="width: 100px">
                    <el-option
                      v-for="item in fontOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="0" type="flex">
              <el-col :span="8">
                <el-form-item label="字体大小:">
                  <el-input v-model="form.organ.fontSize" style="width: 100px;" type="number" :min="0"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="字体颜色:">
                  <el-color-picker v-model="form.organ.fontColor" style="width: 100px"></el-color-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="指向关系:">
                  <el-select v-model="form.organ.relationType" placeholder="请选择" value-key="app_id" filterable style="width: 100px">
                    <el-option label="收费内容" :value="1"></el-option>
                    <el-option label="无需指向" :value="2"></el-option>
                    <el-option label="私有app" :value="3"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="指向app:" v-show="form.organ.relationType==3">
                  <el-select v-model="form.organ.relation" placeholder="请选择" value-key="app_id" filterable style="width: 100px">
                    <el-option
                      v-for="item in relateOption"
                      :key="item.app_id"
                      :label="item.column_name"
                      :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="位置设定:">
                  <el-button @click="showPreview('organ')">点击设置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <el-divider></el-divider>

          <div class="messageBase" style="margin-right: 10px">
            <h4 style="margin-left: 10px">消息通知栏设置</h4>
            <el-row :gutter="0" type="flex">
              <el-col :span="8">
                <el-form-item label="字体:">
                  <el-select v-model="form.message.font" placeholder="请选择" style="width: 100px">
                    <el-option
                      v-for="item in fontOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="字体大小:">
                  <el-input type="number" v-model="form.message.fontSize" style="width: 100px;" :min="0"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="字体颜色:">
                  <el-color-picker v-model="form.message.fontColor" style="width: 100px"></el-color-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="背景色:">
                  <el-color-picker v-model="form.message.backColor"></el-color-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="设定位置:">
                  <el-button @click="showPreview('message')">点击设置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <el-divider></el-divider>
          <div class="chooseButtonBase" style="margin-right: 10px">
            <h4 style="margin-left: 10px">模板切换按钮</h4>
            <el-row>
              <el-col :span="8">
                <el-form-item label="字体:">
                  <el-select v-model="form.chooseButton.font" placeholder="请选择">
                    <el-option
                      v-for="item in fontOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="字体大小:">
                  <el-input type="number" v-model="form.chooseButton.fontSize" style="width: 100%;" :min="0"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="字体颜色:">
                  <el-color-picker v-model="form.chooseButton.fontColor"></el-color-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="背景色:">
                  <el-color-picker v-model="form.chooseButton.buttonColor"></el-color-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="不透明度:">
                  <el-input-number v-model="form.chooseButton.transparency" :min="0" :max="100" style="width: 100%;"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="位置设定:">
                  <el-button @click="showPreview('chooseButton')">点击设置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <el-divider></el-divider>
          <div class="chooseInner" style="margin-right: 10px">
            <h4 style="margin-left: 10px">模板选择弹窗</h4>
            <el-row>
              <el-col :span="8">
                <el-form-item label="字体:">
                  <el-select v-model="form.chooseInner.font" placeholder="请选择">
                    <el-option
                      v-for="item in fontOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="字体大小:">
                  <el-input type="number" v-model="form.chooseInner.fontSize" style="width: 100%;" :min="0"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="字体颜色:">
                  <el-color-picker v-model="form.chooseInner.fontColor"></el-color-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="背景图片:">
                  <div class="flex">
                    <el-upload
                      class="avatar-uploader"
                      action
                      :show-file-list="false"
                      :on-change="(res,file,type) => {screenBackgroundUpload(res, file, 'chooseInnerImg')}">
                      <img v-if="form.chooseInner.img" :src="form.chooseInner.img" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div><i v-if="form.chooseInner.img" class="el-icon-delete" @click="form.chooseInner.img=''"></i>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="位置设定:">
                  <el-button @click="showPreview('chooseInner')">点击设置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <el-divider></el-divider>
          <div class="selfButton1" style="margin-right: 10px">
            <h4 style="margin-left: 10px">自定义功能按钮1</h4>
            <div class="flex">
              <el-form-item label="图标上传:">
                <el-col :span="12">
                  <div class="flex">
                    <el-upload
                      class="avatar-uploader"
                      action
                      :show-file-list="false"
                      :on-change="(res,file,type) => {screenBackgroundUpload(res, file, 'selfButton1')}">
                      <img v-if="form.selfButton1.img" :src="form.selfButton1.img" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div><i v-if="form.selfButton1.img" class="el-icon-delete" @click="form.selfButton1.img=''"></i>
                    </div>
                  </div>
                </el-col>
              </el-form-item>
              <el-form-item label="指向关系:">
                <el-select v-model="form.selfButton1.relationType" placeholder="请选择" value-key="app_id" filterable style="width: 100px">
                  <el-option label="收费内容" :value="1"></el-option>
                  <el-option label="无需指向" :value="2"></el-option>
                  <el-option label="私有app" :value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="指向app:" v-show="form.selfButton1.relationType==3">
                <el-select v-model="form.selfButton1.relation" placeholder="请选择" value-key="app_id" filterable style="width: 100px">
                  <el-option
                    v-for="item in relateOption"
                    :key="item.app_id"
                    :label="item.column_name"
                    :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <el-form-item label="位置设定:">
              <el-button @click="showPreview('selfButton1')">点击设置</el-button>
            </el-form-item>
          </div>

          <div class="selfButton2" style="margin-right: 10px">
            <h4 style="margin-left: 10px">自定义功能按钮2</h4>
            <div class="flex">
              <el-form-item label="图标上传:">
                <el-col :span="12">
                  <div class="flex">
                    <el-upload
                      class="avatar-uploader"
                      action
                      :show-file-list="false"
                      :on-change="(res,file,type) => {screenBackgroundUpload(res, file, 'selfButton2')}">
                      <img v-if="form.selfButton2.img" :src="form.selfButton2.img" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div><i v-if="form.selfButton2.img" class="el-icon-delete" @click="form.selfButton2.img=''"></i>
                    </div>
                  </div>
                </el-col>
              </el-form-item>
              <el-form-item label="指向关系:">
                <el-select v-model="form.selfButton2.relationType" placeholder="请选择" value-key="app_id" filterable style="width: 100px">
                  <el-option label="收费内容" :value="1"></el-option>
                  <el-option label="无需指向" :value="2"></el-option>
                  <el-option label="私有app" :value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="指向app:" v-show="form.selfButton2.relationType==3">
                <el-select v-model="form.selfButton2.relation" placeholder="请选择" value-key="app_id" filterable style="width: 100px">
                  <el-option
                    v-for="item in relateOption"
                    :key="item.app_id"
                    :label="item.column_name"
                    :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <el-form-item label="位置设定:">
              <el-button @click="showPreview('selfButton2')">点击设置</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-aside>
      <el-main>
        <el-form ref="form" :model="form" label-width="150px">
          <div>
            <h4 style="margin-left: 10px;">更多应用页显示设置</h4>
            <el-form-item label="显示设置:">
              <el-radio-group v-model="form.showMoreApp">
                <el-radio :label=1>显示</el-radio>
                <el-radio :label=-1>不显示</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <el-divider></el-divider>
          <div class="navigationBase">
            <h4 style="margin-left: 10px;">导航条设置</h4>
            <el-form-item label="显示设置:">
              <el-radio-group v-model="form.navigation.isShow">
                <el-radio :label=1>显示</el-radio>
                <el-radio :label=-1>不显示</el-radio>
              </el-radio-group>
            </el-form-item>
            <div v-if="form.navigation.isShow===1" class="pr-6">
              <div class="flex w-full  justify-between">
                <el-form-item label="上下位置设置:">
                  <el-radio-group v-model="form.navigation.upDownSet">
                    <el-radio :label=1>居上</el-radio>
                    <el-radio :label=2>居下</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="边距值:">
                  <el-input-number v-model="form.navigation.xSpacing" size="mini" :min="0"></el-input-number>
                </el-form-item>
              </div>
              <div class="flex w-full  justify-between">
                <el-form-item label="左右位置设置:">
                  <el-radio-group v-model="form.navigation.leftRightSet">
                    <el-radio :label=1>居左</el-radio>
                    <el-radio :label=2>居中</el-radio>
                    <el-radio :label=3>居右</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="边距值:" v-if="form.navigation.leftRightSet!==2">
                  <el-input-number v-model="form.navigation.ySpacing" size="mini" :min="0"></el-input-number>
                </el-form-item>
              </div>
              <h6 style="margin-left: 10px; margin-top: 0; margin-bottom: 0">未选中状态</h6>
              <div class="flex">
                <el-form-item label="字体:" size="mini">
                  <el-select v-model="form.navigation.noChooseFont" placeholder="请选择">
                    <el-option
                      v-for="item in fontOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="字体大小:" size="mini">
                  <el-input type="number" v-model="form.navigation.noChooseFontSize" style="width: 100%;" :min="0"></el-input>
                </el-form-item>
                <el-form-item label="字体颜色:" size="mini">
                  <el-color-picker v-model="form.navigation.noChooseFontColor"></el-color-picker>
                </el-form-item>
              </div>
              <h6 style="margin-left: 10px; margin-top: 0; margin-bottom: 0">选中状态</h6>
              <div class="flex">
                <el-form-item label="字体:" size="mini">
                  <el-select v-model="form.navigation.font" placeholder="请选择">
                    <el-option
                      v-for="item in fontOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="字体大小:" size="mini">
                  <el-input type="number" v-model="form.navigation.fontSize" style="width: 100%;" :min="0"></el-input>
                </el-form-item>
                <el-form-item label="字体颜色:" size="mini">
                  <el-color-picker v-model="form.navigation.fontColor"></el-color-picker>
                </el-form-item>
              </div>

              <div class="flex">
                <el-form-item label="未选中背景图:">
                  <div class="flex">
                    <el-upload
                      class="background-uploader"
                      action
                      :auto-upload="false"
                      :show-file-list="false"
                      :on-change="(res,file,type) => {screenBackgroundUpload(res, file, 'noChooseImg')}"
                    >
                      <img v-if="form.navigation.noChooseImg" :src="form.navigation.noChooseImg" class="backgroudAvatr">
                      <i v-else class="el-icon-plus tab-uploader-icon"></i>
                    </el-upload>
                    <div>
                      <i v-if="form.navigation.noChooseImg" class="el-icon-delete" @click="form.navigation.noChooseImg=''"></i>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="选中背景图:">
                  <div class="flex">
                    <el-upload
                      class="background-uploader"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :show-file-list="false"
                      :on-change="(res,file,type) => {screenBackgroundUpload(res, file, 'chooseImg')}"
                    >
                      <img v-if="form.navigation.chooseImg" :src="form.navigation.chooseImg" class="backgroudAvatr">
                      <i v-else class="el-icon-plus tab-uploader-icon"></i>
                    </el-upload>
                    <div>
                      <i v-if="form.navigation.chooseImg" class="el-icon-delete" @click="form.navigation.chooseImg=''"></i>
                    </div>
                  </div>
                </el-form-item>
              </div>
              <el-form-item label="各选项间距:">
                <el-input-number v-model="form.navigation.innerSpacing" :min="0"></el-input-number>
              </el-form-item>
            </div>
          </div>
          <el-divider></el-divider>
          <!--          快捷应用栏-->
          <div>
            <h4 style="margin-left: 10px">快捷应用栏</h4>
            <el-form-item label="显示设置:">
              <el-radio-group v-model="form.quickBar.isShow">
                <el-radio :label=1>显示</el-radio>
                <el-radio :label=-1>不显示</el-radio>
              </el-radio-group>
            </el-form-item>
            <div>
              <div class="flex">
                <el-form-item label="背景颜色:" size="mini">
                  <el-color-picker v-model="form.quickBar.bgColor" style="width: 100px"></el-color-picker>
                </el-form-item>
                <el-form-item label="不透明度:" size="mini">
                  <el-input-number v-model="form.quickBar.transparency" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="边角弧度值:" size="mini">
                  <el-input-number v-model="form.quickBar.radius" :min="0"></el-input-number>
                </el-form-item>
              </div>
              <el-form-item label="快捷应用:">
                <el-select v-model="form.quickBar.fastAppArr" multiple :multiple-limit="10" collapse-tags style="margin-left: 20px;" value-key="app_package" filterable placeholder="请选择">
                  <el-option
                    v-for="item in appOptions"
                    :key="item.app_id"
                    :label="item.app_name"
                    :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="应用名称显示:">
                <el-radio-group v-model="form.quickBar.isShowAppName">
                  <el-radio :label=1>显示</el-radio>
                  <el-radio :label=-1>不显示</el-radio>
                </el-radio-group>
              </el-form-item>
              <div class="flex" v-if="form.quickBar.isShowAppName===1">
                <el-form-item label="应用名称颜色:">
                  <el-color-picker v-model="form.quickBar.fontColor" color-format="hex" style="width: 100px"></el-color-picker>
                </el-form-item>
                <el-form-item label="应用名称字体大小:">
                  <el-input type="number" v-model="form.quickBar.fontSize" :min="0"></el-input>
                </el-form-item>
              </div>
              <div class="flex">
                <el-form-item label="应用图标间距:">
                  <el-input type="number" v-model="form.quickBar.iconSpacing" :min="0"></el-input>
                </el-form-item>
                <el-form-item label="应用图标大小">
                  <el-select v-model="form.quickBar.iconSize">
                    <el-option label="大" :value="1"></el-option>
                    <el-option label="中" :value="2"></el-option>
                    <el-option label="小" :value="3"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </div>
          <el-divider></el-divider>
          <!--        次级页面返回按钮设置-->
          <div class="retButtonBase">
            <h4 style="margin-left: 10px">次级页面返回按钮</h4>
            <div class="flex">
              <el-form-item label="图标上传:">
                <el-col :span="12">
                  <div class="flex">
                    <el-upload
                      class="avatar-uploader"
                      action
                      :show-file-list="false"
                      :on-change="(res,file,type) => {screenBackgroundUpload(res, file, 'returnButImg')}">
                      <img v-if="form.retButton.img" :src="form.retButton.img" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div><i v-if="form.retButton.img" class="el-icon-delete" @click="form.retButton.img=''"></i></div>
                  </div>
                </el-col>
              </el-form-item>
              <el-form-item label="位置设定:">
                <el-button @click="showPreview('retButton')">点击设置</el-button>
              </el-form-item>
            </div>
          </div>
          <el-divider></el-divider>

          <!--        刷新按钮设置-->
          <div class="refreshButtonBase">
            <h4 style="margin-left: 10px">刷新按钮</h4>
            <div class="flex">
              <el-form-item label="图标上传:">
                <el-col :span="12">
                  <div class="flex">
                    <el-upload
                      class="avatar-uploader"
                      action
                      :show-file-list="false"
                      :on-change="(res,file,type) => {screenBackgroundUpload(res, file, 'refreshButtonImg')}">
                      <img v-if="form.refreshButton.img" :src="form.refreshButton.img" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div><i v-if="form.refreshButton.img" class="el-icon-delete" @click="form.refreshButton.img=''"></i>
                    </div>
                  </div>
                </el-col>
              </el-form-item>
              <el-form-item label="位置设定:">
                <el-button @click="showPreview('refreshButton')">点击设置</el-button>
              </el-form-item>
            </div>
          </div>
          <el-divider></el-divider>
          <!--          一下为护眼-->
          <div>
            <h4 style="margin-left: 10px">护眼功能</h4>
            <div class="flex">
              <el-form-item label="图标上传:">
                <el-col :span="12">
                  <div class="flex">
                    <el-upload
                      class="avatar-uploader"
                      action
                      :show-file-list="false"
                      :on-change="(res,file,type) => {screenBackgroundUpload(res, file, 'eyesImg')}">
                      <img v-if="form.eyesFunction.img" :src="form.eyesFunction.img" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div><i v-if="form.eyesFunction.img" class="el-icon-delete" @click="form.eyesFunction.img=''"></i>
                    </div>
                  </div>
                </el-col>
              </el-form-item>
              <el-form-item label="关闭图标上传:">
                <el-col :span="12">
                  <div class="flex">
                    <el-upload
                      class="avatar-uploader"
                      action
                      :show-file-list="false"
                      :on-change="(res,file,type) => {screenBackgroundUpload(res, file, 'eyesImgClose')}">
                      <img v-if="form.eyesFunction.closeImg" :src="form.eyesFunction.closeImg" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>
                      <i v-if="form.eyesFunction.closeImg" class="el-icon-delete" @click="form.eyesFunction.closeImg=''"></i>
                    </div>
                  </div>
                </el-col>
              </el-form-item>
            </div>
            <el-form-item label="指向开关:">
              <el-select v-model="form.eyesFunction.relationType">
                <el-option
                  v-for="item in eyesOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="位置设定:">
              <el-button @click="showPreview('eyes')">点击设置</el-button>
            </el-form-item>
          </div>
        </el-form>

      </el-main>
      <div class="setFloatButton">
        <el-button type="primary" class="previewButton" @click="showPreview">点击预览</el-button>
        <el-button type="primary" class="saveButton" @click="onSubmit">保存</el-button>
        <el-button type="primary" class="backButton" @click="backToLauncher">返回</el-button>
      </div>

      <!--    预览组件-->
      <el-drawer
        class="previewDrawer"
        :visible.sync="openPreview"
        :direction="direction"
        :show-close="true"
        size="80%"
        :append-to-body="true"
        @open="drawerHandle"
        ref="drawerExam"
      >
        <canvas id="myCanvas" ref="myCanvas" @mousedown="mousedown" @mouseup="mouseup" @mousemove="mousemove"
                :style="{ backgroundImage: `url(${canvasImg})`,width:'640px', height:'400px',position:'absolute',backgroundSize:'cover' }"
        ></canvas>
        <el-button v-if="openPreview" type="primary" class="innerSaveButton" @click="openPreview=false">确定</el-button>
      </el-drawer>
    </el-container>
  </el-container>
</template>

<script>
import {ossImage} from "@/utils/ossUpload";
import {addLauncherContent, queryLauncherContent} from "@/api/launcherMade";

export default {
  name: 'index',
  data() {
    return {
      form: {
        //屏幕
        screen: {
          firstScreenImg: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/img/168388620281341.6(1).png',   //首屏背景图
          secondScreenImg: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/img/168388620281341.6(1).png',  //二屏背景图
          lockScreenImg: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/img/168388620281341.6(1).png',     //锁屏背景图
          width: '',
          height: '',
        },
        //机构
        organ: {
          name: '',
          img: '',
          font: 1,
          fontSize: 18,
          fontColor: '',
          width: '',
          height: '',
          x: 0,
          y: 0,
          relationType: 1,
          relation: [],  //指向关系
        },
        //模板选择弹窗
        chooseButton: {
          name: '模板切换按钮',
          img: '',
          font: 1,
          fontSize: 18,
          fontColor: '',
          width: 0,
          height: 0,
          buttonColor: '',
          transparency: 0,
          x: 0,
          y: 0,
        },
        //模板选择内页
        chooseInner: {
          name: '模板选择弹窗',
          font: 1,
          fontSize: 18,
          fontColor: '',
          width: 0,
          height: 0,
          img: '',
          x: 0,
          y: 0,
        },
        //消息通知栏
        message: {
          name: '消息通知栏',
          img: '',
          font: 1,
          fontSize: 18,
          fontColor: '',
          backColor: '',
          width: 0,
          height: 0,
          x: 0,
          y: 0
        },
        //导航栏
        navigation: {
          type: '1',   //1:指示器 2:Tab导航 3:快捷应用图标
          width: 0,
          height: 0,
          x: 0,
          y: 0,
          name: '导航栏设置',
          noChooseImg: '',
          chooseImg: '',
          noChooseTabColor: '',
          chooseTabColor: '',
          fontSize: 18,
          fontColor: '',
          fastImgWidth: 0,
          fastImgHeight: 0,
          // fastNum: 0,
          fastAppArr: [],   //选择的快捷应用

          //2025-2-5需求新加字段
          isShow: -1, //是否显示 1：是 -1:否
          upDownSet: 1, //上下位置设置 1:居上 2:局下
          leftRightSet: 1, //左右位置设置 1:局左 2：局中 3：局右
          xSpacing: 0, //upDownSet设置为局上时候边距为上边距 为局下时则为下边距
          ySpacing: 0, //leftRightSet设置为局左时则为左边距 局右时则为右边距
          noChooseFont: 1,
          noChooseFontSize: 18,
          noChooseFontColor: '',
          font: 1,
          innerSpacing: 10, //各选项间距
        },
        //次级页面返回按钮
        retButton: {
          width: 0,
          height: 0,
          x: 0,
          y: 0,
          img: '',
          name: '次级返回按钮'
        },
        //刷新按钮
        refreshButton: {
          width: 0,
          height: 0,
          x: 0,
          y: 0,
          img: '',
          name: '刷新按钮'
        },
        eyesFunction: {
          width: 0,
          height: 0,
          x: 0,
          y: 0,
          img: '',
          name: '护眼',
          closeImg: '',
          relationType: '',
        },
        color: '',  //Tab颜色
        quickBar: {  //快捷应用栏
          isShow: -1, //是否显示 1：是 -1：否
          bgColor: '',
          transparency: 0,  //透明度
          radius: 0,
          fastAppArr: [],   //选择的快捷应用
          isShowAppName: 0, //是否显示快捷应用名称 1:是 -1:否
          fontColor: null, //应用名称颜色
          fontSize: 18, //应用名称字体大小
          iconSpacing: 10, //应用图标间距
          iconSize: 1, //快捷应用图标大小：1:大 2:中 3:小
        },
        selfButton1: {
          width: 0,
          height: 0,
          x: 0,
          y: 0,
          img: '',
          name: '自定义功能按钮1',
          relationType: '',
          relation: '',
        },
        selfButton2: {
          width: 0,
          height: 0,
          x: 0,
          y: 0,
          img: '',
          name: '自定义功能按钮2',
          relationType: '',
          relation: '',
        },
        showMoreApp: 1,
      },
      uploadLink: process.env.VUE_APP_BASE_API,
      //预览组件
      openPreview: false,
      direction: 'ttb',
      flag: false,
      x: 0,
      y: 0,
      width: 0,
      height: 0,
      plateName: '',  //点击位置设置时候对应板块的名称
      drawerExam: {},
      relateOption: [],
      appOptions: [{label: '课程格子', value: 102}, {label: '小鹅通助手', value: 114}, {label: '百词斩', value: 214}],
      fontOption: [{label: '方正黑体', value: 1}, {label: '方正书宋', value: 2}, {
        label: '方正仿宋',
        value: 3
      }, {label: '方正楷体', value: 4}],
      launcher_id: this.$route.query.launcher_id,
      canvasImg: '',
      launcher_name: '',
      isValidImg: false,
      eyesOptions: [{label: '距离护眼', value: 'distance'}, {label: '抖动提醒', value: 'shake'}, {
        label: '反转护眼',
        value: 'reversal'
      }, {label: '光感护眼', value: 'light'}, {label: '黑白阅读', value: 'black_white'}]
    }
  },
  created() {
    this.queryLauncherInfo()
  },

  methods: {
    onSubmit() {
      let addForm = JSON.parse(JSON.stringify(this.form))
      addForm.last_ip = sessionStorage.getItem("Ip")
      addForm.userId = localStorage.getItem("ID")
      addForm.launcher_id = this.launcher_id
      addForm.type = 1   //type 1：样式定制 2：页面定制
      addLauncherContent(addForm).then(res => {
        this.$message.success(res.msg)
        this.queryLauncherInfo()
        this.dialogFormVisible = false
      }).catch(err => {
      })
    },
    queryLauncherInfo() {
      var listQuery = {
        launcher_id: this.launcher_id,
        last_ip: sessionStorage.getItem("Ip"),
        userId: localStorage.getItem("ID"),
        type: 1
      }
      queryLauncherContent(listQuery).then(res => {
        if (res.code == 200) {
          if (res.data.launcher_content) {
            this.form = res.data.launcher_content
            this.canvasImg = this.form.screen.firstScreenImg
          }
          if (this.form.chooseButton === undefined) {
            this.$set(this.form, 'chooseButton', this.$options.data.call(this).form.chooseButton)
          }
          if (this.form.chooseInner === undefined) {
            this.$set(this.form, 'chooseInner', this.$options.data.call(this).form.chooseInner)
          }
          if (this.form.eyesFunction === undefined || this.form.eyesFunction.closeImg === undefined) {
            this.$set(this.form, 'eyesFunction', this.$options.data.call(this).form.eyesFunction);
          }
          if (this.form.quickBar === undefined || this.form.quickBar.isShow === undefined) {
            this.$set(this.form, 'quickBar', this.$options.data.call(this).form.quickBar);
          }

          if (this.form.selfButton1 === undefined) {
            this.$set(this.form, 'selfButton1', this.$options.data.call(this).form.selfButton1)
          }
          if (this.form.selfButton2 === undefined) {
            this.$set(this.form, 'selfButton2', this.$options.data.call(this).form.selfButton2)
          }
          if (this.form.navigation === undefined || this.form.navigation.isShow === undefined) {
            this.$set(this.form, 'navigation', this.$options.data.call(this).form.navigation)
          }
          if (this.form.showMoreApp === undefined) {
            this.$set(this.form, 'showMoreApp', this.$options.data.call(this).form.showMoreApp)
          }
          this.form.screen.width = res.data.width
          this.form.screen.height = res.data.height
          this.launcher_name = res.data.launcher_name
          this.appOptions = res.data.appOptions
          this.relateOption = res.data.relateOption
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
      })
    },

    //背景图片上传
    screenBackgroundUpload(res, file, type) {
      file = res.raw
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt3M = file.size / 1024 / 1024 < 3
      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是jpg或png格式!')
        return false
      }
      if (!isLt3M) {
        this.$message.error('上传头像图片大小不能超过 3MB!')
        return false
      }
      let validWidth = 0, validHeight = 0;
      switch (type) {
        case 'first':
        case 'second':
        case 'third':
          validWidth = this.form.screen.width;
          validHeight = this.form.screen.height;
          this.valWidthAndHeight(file, validWidth, validHeight, res.name, type)
          return
          break
      }
      ossImage(res.raw, res.name).then(res => {//图片上传
        switch (type) {
          case 'first':
            this.form.screen.firstScreenImg = res
            this.canvasImg = res
            break
          case 'second':
            this.form.screen.secondScreenImg = res
            break
          case 'third':
            this.form.screen.lockScreenImg = res
            break
          case 'organImg':
            this.form.organ.img = res
            break
          case 'noChooseImg':
            this.form.navigation.noChooseImg = res
            break
          case 'chooseImg':
            this.form.navigation.chooseImg = res
            break
          case 'returnButImg':
            this.form.retButton.img = res
            break
          case 'eyesImg':
            this.form.eyesFunction.img = res
            break
          case 'eyesImgClose':
            this.form.eyesFunction.closeImg = res
            break
          case 'refreshButtonImg':
            this.form.refreshButton.img = res
            break
          case 'chooseButtonImg':
            this.form.chooseButton.img = res
            break
          case 'chooseInnerImg':
            this.form.chooseInner.img = res
            break
          case 'selfButton1':
            this.form.selfButton1.img = res
            break
          case 'selfButton2':
            this.form.selfButton2.img = res
            break
        }
      }).catch(err => {
        console.log('error:', err)
      })
    },

    valWidthAndHeight: function (file, validWidth, validHeight, name, type) {
      return new Promise(function (resolve, reject) {
        let width = validWidth  //图片宽度
        let height = validHeight; //图片高度
        let _URL = window.URL || window.webkitURL;
        let image = new Image();
        image.src = _URL.createObjectURL(file);
        image.onload = function () {
          let valid = image.width == width && image.height == height;
          valid ? resolve() : reject();
        };
      }).then(() => {
        ossImage(file, name).then(res => {//图片上传
          switch (type) {
            case 'first':
              this.form.screen.firstScreenImg = res
              this.canvasImg = res
              break
            case 'second':
              this.form.screen.secondScreenImg = res
              break
            case 'third':
              this.form.screen.lockScreenImg = res
              break
          }
        }).catch(err => {
          console.log('error:', err)
        })
      }).catch(error => {
        this.$message.error("上传图片尺寸不符合,请上传" + validWidth + "*" + validHeight + "规格图片~");
      })

    },
    //打开预览画布
    showPreview(name = 'previewAll') {
      this.openPreview = !this.openPreview
      this.plateName = name
    },
    drawerHandle(e) {
      var width = this.form.screen.width
      var height = this.form.screen.height
      var that = this
      setTimeout(function () {
        var canvas = document.getElementById('myCanvas')
        canvas.setAttribute('width', '640')  //todo：这里宽度和高度暂时写为640*400
        canvas.setAttribute('height', '400')
        that.drawRect(canvas, 'organ')
        that.drawRect(canvas, 'chooseButton')
        that.drawRect(canvas, 'message')
        that.drawRect(canvas, 'navigation')
        that.drawRect(canvas, 'retButton')
        that.drawRect(canvas, 'eyes')
        that.drawRect(canvas, 'refreshButton')
        that.drawRect(canvas, 'chooseInner')
        that.drawRect(canvas, 'selfButton1')
        that.drawRect(canvas, 'selfButton2')
      }, 0)
    },

    //根据鼠标拖动画出对应矩形
    drawRect(canvas, name) {
      var ctx = canvas.getContext('2d')
      ctx.fillStyle = 'rgb(200,0,0)'
      ctx.font = '10px sans-serif'
      var temp = {x: 0, y: 0, width: 0, height: 0, fontColor: '', name: ''}
      switch (name) {
        case 'organ':
          temp = this.form.organ
          break
        case 'chooseButton':
          temp = this.form.chooseButton
          break
        case 'chooseInner':
          temp = this.form.chooseInner
          break
        case 'message':
          temp = this.form.message
          break
        case 'navigation':
          temp = this.form.navigation
          break
        case 'retButton':
          temp = this.form.retButton
          break
        case 'eyes':
          temp = this.form.eyesFunction
          break
        case 'refreshButton':
          temp = this.form.refreshButton
          break
        case 'selfButton1':
          temp = this.form.selfButton1
          break
        case 'selfButton2':
          temp = this.form.selfButton2
          break
        default:
          return
      }
      ctx.fillRect(temp.x, temp.y, temp.width, temp.height)
      var color = temp.fontColor
      if (color == undefined || color == '') color = '#00ff00'
      var halfx = temp.x + temp.width / 2
      var halfy = temp.y + temp.height / 2
      ctx.fillStyle = color
      ctx.fillText(temp.name, halfx, halfy, temp.width / 2)
    },
    mousedown(e) {
      this.flag = true
      this.x = e.offsetX // 鼠标落下时的X
      this.y = e.offsetY // 鼠标落下时的Y
    },
    mouseup(e) {
      this.flag = false
      const canvas = this.$refs.myCanvas
      //根据对应板块返回宽高大小和位置
      switch (this.plateName) {
        case '':
          break
        case 'organ':
          this.form.organ.x = this.x
          this.form.organ.y = this.y
          this.form.organ.width = this.width
          this.form.organ.height = this.height
          this.drawRect(canvas, 'organ')
          break
        case 'chooseButton':
          this.form.chooseButton.x = this.x
          this.form.chooseButton.y = this.y
          this.form.chooseButton.width = this.width
          this.form.chooseButton.height = this.height
          this.drawRect(canvas, 'chooseButton')
          break
        case 'chooseInner':
          this.form.chooseInner.x = this.x
          this.form.chooseInner.y = this.y
          this.form.chooseInner.width = this.width
          this.form.chooseInner.height = this.height
          this.drawRect(canvas, 'chooseInner')
          break
        case 'message':
          this.form.message.x = this.x
          this.form.message.y = this.y
          this.form.message.width = this.width
          this.form.message.height = this.height
          this.drawRect(canvas, 'message')
          break
        case 'navigation':
          this.form.navigation.x = this.x
          this.form.navigation.y = this.y
          this.form.navigation.width = this.width
          this.form.navigation.height = this.height
          this.drawRect(canvas, 'navigation')
          break
        case 'retButton':
          this.form.retButton.x = this.x
          this.form.retButton.y = this.y
          this.form.retButton.width = this.width
          this.form.retButton.height = this.height
          this.drawRect(canvas, 'retButton')
          break
        case 'eyes':
          this.form.eyesFunction.x = this.x
          this.form.eyesFunction.y = this.y
          this.form.eyesFunction.width = this.width
          this.form.eyesFunction.height = this.height
          this.drawRect(canvas, 'eyes')
          break
        case 'refreshButton':
          this.form.refreshButton.x = this.x
          this.form.refreshButton.y = this.y
          this.form.refreshButton.width = this.width
          this.form.refreshButton.height = this.height
          this.drawRect(canvas, 'refreshButton')
          break
        case 'selfButton1':
          this.form.selfButton1.x = this.x
          this.form.selfButton1.y = this.y
          this.form.selfButton1.width = this.width
          this.form.selfButton1.height = this.height
          this.drawRect(canvas, 'selfButton1')
          break
        case 'selfButton2':
          this.form.selfButton2.x = this.x
          this.form.selfButton2.y = this.y
          this.form.selfButton2.width = this.width
          this.form.selfButton2.height = this.height
          this.drawRect(canvas, 'selfButton2')
          break
      }
      //鼠标抬起下次初始位置为0
      this.x = this.y = this.width = this.height = 0
    },
    mousemove(e) {
      this.getRectInfo(e)
    },
    getRectInfo(e) {
      if (this.flag == true) {
        const canvas = this.$refs.myCanvas
        var ctx = canvas.getContext('2d')
        let x = this.x
        let y = this.y
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        ctx.beginPath()
        //设置线条颜色，必须放在绘制之前
        // ctx.strokeStyle = '#00ff00'
        ctx.strokeStyle = 'rgb(200,0,0)'
        // 线宽设置，必须放在绘制之前
        ctx.lineWidth = 1

        let drawArr = ['organ', 'message', 'navigation', 'retButton', 'eyes', 'refreshButton', 'chooseButton', 'chooseInner', 'selfButton1', 'selfButton2']
        drawArr.forEach((item, index) => {
          if (item != this.plateName) {
            this.drawRect(canvas, item)
          }
        })
        ctx.strokeRect(x, y, e.offsetX - x, e.offsetY - y)
        this.x = x
        this.y = y
        this.width = e.offsetX - x
        this.height = e.offsetY - y
      }
    },
    backToLauncher() {
      this.$confirm('请确认是否要放弃当前修改项', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.push({name: 'launcherUI'});
      })
    }


  },
  mounted() {
  }
}
</script>


<!--布局样式-->
<style>
.el-header, .el-footer {
  color: #333;
  text-align: center;
  line-height: 60px;
  font-size: 20px;
}

.el-aside {
  color: #333;
  vertical-align: middle;
}

.el-main {
  margin: 0;
  padding: 0;
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}

</style>

<!--首屏背景图样式-->
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 62px;
  line-height: 100px;
  text-align: center;
}

.organ_img_uploader {
  font-size: 18px;
  color: #8c939d;
  width: 42px;
  text-align: center;
  height: 40px;
  line-height: 40px;
}

.tab-uploader-icon {
  font-size: 18px;
  color: #8c939d;
  width: 100px;
  text-align: center;
  border: 1px solid rgb(204, 204, 204);
  height: 40px;
  line-height: 40px;
}

.avatar {
  width: 100px;
  height: 62px;
  display: block;
  border-style: none
}

.previewButton {
  float: right;
  padding: 10px 15px;
  margin-left: 10px;
  margin-right: 10px;
}

.saveButton {
  float: right;
  padding: 10px 15px;

}

.backButton {
  float: right;
  padding: 10px 15px;
  margin-left: 10px;
  margin-bottom: 6px;
}

.previewDrawer {
  /*margin-left: 265px;*/
}

canvas {
  border: 1px solid red;
}

#myCanvas {
  margin-left: 10%;
  margin-right: 10%;
}

.background-uploader {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  outline: none;
}

.backgroudAvatr {
  max-height: 40px;
  object-fit: cover;
  border: 1px solid rgb(204, 204, 204);
  padding: 5px;
}

.innerSaveButton {
  float: left;
  margin-left: 60%;
  margin-top: 25%;
}

.setFloatButton {
  width: 85%;
  position: fixed;
  bottom: 0
}

</style>

